<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <form id="uploadForm">
            <input type="file" id="fileInput" name="file">
            <button type="button" id="uploadButton">上传</button>
        </form>
    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#uploadButton').click(function(e) {
                e.preventDefault(); // 阻止表单默认提交行为

                let formData = new FormData();
                let fileInput = $('#fileInput')[0];
                let file = fileInput.files[0];

                let objectProperty = {
                    type: "Image",
                    name: file.name,
                    size: file.size
                }

                // 将文件添加到FormData对象
                formData.append('file', file);

                // 将其他表单字段（作为对象的一部分）添加到FormData对象
                formData.append('attachmentInfo', JSON.stringify(objectProperty));

                $.ajax({
                    url: '/attachments/upload', // 替换为你的Spring Boot控制器映射的URL
                    type: 'POST',
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function(data) {
                        console.log('上传成功:', data);
                    },
                    error: function(error) {
                        console.log('上传失败:', error);
                    }
                });
            });
        });


    </script>
</body>
</html>
